<template>
	<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="450px">
		<a-spin :spinning="loading">
			<a-form :form="form">
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="排序" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="请输入" v-decorator="['sort',
				                {
				                    rules: [{ required: true, message: '请输入', whitespace: true,type:'any' }],
				                },
				            ]" maxLength="-1"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="banner位置" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-select @change="changeSelect"  v-decorator="['position',
                                {
                                    rules: [{ required: true, message: '请选择', whitespace: true,type:'number' }],
                                },
                            ]">
								<a-select-option :value="item.id" v-for="(item,index) in post_list"
									:key="index">{{item.positionName}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="图片" :label-col="labelCol" :wrapper-col="wrapperCol">
							<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
								:show-upload="formgetFileLength(`picUrl`) < 1"
                            accept=".png,.jpg"
								@uploadSuccess="formuploadSuccess($event, `picUrl`)" v-decorator="[
						        `picUrl`,
						        {
						            rules: [{ required: true, message: '请上传图片', type: 'array' }],
						            initialValue: [],
						        },
						    ]" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="跳转链接" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="请输入类目名称" v-decorator="['url',
				                {
				                    rules: [{ required: true, message: '请输入', whitespace: true,type:'string' }],
				                },
				            ]" maxLength="-1"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="状态" :label-col="labelCol" :wrapper-col="wrapperCol">
							<div class="flex items-center">
								<a-switch :disabled="prohibit" @change="checkedChange" checked-children="开"
									un-checked-children="关" v-decorator="['status', { valuePropName: 'checked' }]" />
								<div class="ml-20">{{ isStatus }}</div>
							</div>
						</a-form-item>
					</a-col>

				</a-row>

			</a-form>
		</a-spin>
	</a-modal>
</template>
<script>
	import {
		get
	} from 'lodash'
	import {
		getBannerPos,
		updateBanner,
		createBanner
	} from '@/api/newPet'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				isStatus: '上架',
				prohibit: false,
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this),
				post_list: [],
        positionName:''
			}
		},
		computed: {

		},
		watch: {

		},
		async created() {

		},
		methods: {
			checkedChange(e) {

				this.isStatus = e ? '上架' : '下架'
			},
			formgetFileLength(type) { //获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					[type]: [data.path],
				})
			},
			changeSelect(e) {
        let post_list = this.post_list
        for (let i = 0; i < post_list.length; i++) {
          if(post_list[i].id == e){
            this.positionName = post_list[i].positionName
            break
          }
        }
				console.log(e)
			},
			onChange(e) {
				console.log(e.target.value)
			},
			cancel() {

				this.form.resetFields()
				this.showModal = false

			},
			confirmOk() {
				this.form.validateFields((err, values) => {

					if (!err) {
						// this.loading = true
						const {
							info

						} = this
						let data = {
							id: info && info.id ? info.id : undefined,
							...this.$utils.trimValue(values),
							status: values.status == true ? 0 : 1,
							picUrl: values.picUrl.join(','),
              positionName:this.positionName
						}

						const fun = info.id ? updateBanner : createBanner
						fun(data)
							.then(() => {
								this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.loading = false
							})
					}
				})
			},
			getData() {
				this.loading = true
				deductionDetail({
					id: 1
				}).then(data => {
					this.details = data
				}).finally(() => this.loading = false)
			},
			open(data) {
				console.log(data, '数据')
				this.showModal = true
				this.info = data
				getBannerPos({
					pageNo: 1,
					pageSize: 100
				}).then(res => {
					this.post_list = res.list;
				})
        if(data.id){
          this.positionName = data.positionName
        }
				this.$nextTick(() => {
					this.form.setFieldsValue({
						...data,
						picUrl: data.picUrl.split(','),
						status: data.status == 0 ? true : false
					})
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;


	}
</style>